<template>
    <!-- 人脸识别提交成功页 -->
    <view class="pages">
        <h-line height="120"></h-line>
        <view class="card">
            <view class="image">
                <up-avatar :src="userStore?.userInfo?.user?.avatar" size="120rpx"></up-avatar>
            </view>
            <view class="name">{{ phoneDesensitization(userStore?.userInfo?.user?.account) }}</view>
            <view class="status flex-center">{{ Number(userStore?.userInfo?.user?.is_certified) === 1 ? '已通过' : '未认证' }}
            </view>
            <view class="line"></view>
            <view class="row">
                <view>姓名</view>
                <view>{{ nameDesensitization(userStore?.userInfo?.user?.real_name) }}</view>
            </view>
            <view class="row">
                <view>身份证号</view>
                <view>{{ idCardDesensitization(userStore?.userInfo?.user?.card_id) }}</view>
            </view>
        </view>

        <!-- <view class="nextBtn" @click="redirectTo('/pages-user/tool-real/real-1?check=true')">修改实名信息</view> -->

    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom, onReady } from '@dcloudio/uni-app'
import { showToast, navigateTo, navigateBack, formatDate, switchTab, redirectTo, idCardDesensitization, nameDesensitization, phoneDesensitization } from '@/utils'
import { useMemberStore } from '@/stores'

const userStore = useMemberStore()
</script>

<style lang="scss" scoped>
.pages {
    width: 750rpx;
    min-height: 100vh;
    background: #f6f6f6;
    font-family: PingFang SC, PingFang SC;


    .card {
        margin: 0 auto;
        width: 638rpx;
        background: #ffffff;
        box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(214, 214, 214, 0.5);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 30rpx;

        .image {
            position: absolute;
            top: -60rpx;
            left: 50%;
            transform: translateX(-50%);
            background-color: #eee;
            border-radius: 50%;
        }

        .name {
            margin-top: 120rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #040404;
        }

        .status {
            width: 127rpx;
            height: 48rpx;
            background: #FFFFFF;
            border-radius: 28rpx 28rpx 28rpx 28rpx;
            opacity: 1;
            border: 1rpx solid #52B633;
            font-size: 26rpx;
            font-weight: 400;
            color: #63CC5E;
            margin-top: 20rpx;
        }

        .line {
            width: 590rpx;
            height: 2rpx;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            opacity: 1;
            background-color: #D9D9D9;
            margin-top: 50rpx;
        }

        .row {
            width: 590rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 28rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #000000;
        }
    }

    .nextBtn {
        margin: 0 auto;
        width: 630rpx;
        height: 90rpx;
        background: #ffb300;
        border-radius: 46rpx;
        font-size: 34rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 90rpx;
        text-align: center;
        margin: 50rpx auto;
    }
}
</style>
